<template>
  <div class="center">
    <div v-for="(item,index) in numArr" :key="index">
      <span>号码：{{ item.str }}==></span>
      <span>出现次数：{{ item.num }}</span>
    </div>
    <span>{{ min }}</span>
    <select v-model="gameNo">
      <option value="sub-index">五</option>
      <option value="index">七</option>
    </select>
    <input v-model="pageIndex" type="text" placeholder="下标">
    <button @click="getNumber(gameNo)">获取号码</button>
    <button @click="delBefore">删除第一条</button>
    <button @click="showNum(pageIndex)">获取出现次数</button>
    <div>
      <div v-for="(res,i) in result" :key="i">{{ res.cp_number }} === &nbsp;{{ res.cp_date }}</div>
    </div>
    <div v-html="resError"></div>
  </div>
</template>
<script>
import axios from 'axios'
export default {
  data() {
    return {
      // 求前100的数
      odl:[
        {str: 0, num: 0},
        {str: 1, num: 0},
        {str: 2, num: 0},
        {str: 3, num: 0},
        {str: 4, num: 0},
        {str: 5, num: 0},
        {str: 6, num: 0},
        {str: 7, num: 0},
        {str: 8, num: 0},
        {str: 9, num: 0}
      ],
      odlNew: [
        {str: 0, num: 0},
        {str: 1, num: 0},
        {str: 2, num: 0},
        {str: 3, num: 0},
        {str: 4, num: 0},
        {str: 5, num: 0},
        {str: 6, num: 0},
        {str: 7, num: 0},
        {str: 8, num: 0},
        {str: 9, num: 0},
        {str: 10, num: 0},
        {str: 11, num: 0},
        {str: 12, num: 0},
        {str: 13, num: 0},
        {str: 14, num: 0}
      ],
      gameNo: 'index',
      numArr: [],
      pageIndex: 0,
      result: [],
      randomArr: [],
      resError: null,
      min: ''
    }
  },
  methods: {
    // 获取号码
    getNumber(game) {
      axios.get(`http://web.hd-blog.com/api/${game}.php`).then(res => {
        if (res.data.success) {
          this.result = res.data.data.map(item => {
            var beforeNumber = item.cp_number.substring(0,7).split('').join(',');
            var afterNumber = item.cp_number.substring(7)
            item.cp_number = beforeNumber+afterNumber
            return {
              ...item
            }
          })
        } else {
          this.resError = res.data
        }
      })
    },
    delBefore() {
      this.result.shift()
    },
    // 出现次数
    showNum(index) {
      for (let o = 0; o < this.odlNew.length; o++) {
        this.odlNew[o].num = 0
      }
      for (let o = 0; o < this.odl.length; o++) {
        this.odl[o].num = 0
      }
      for (var j = 0; j < this.result.length; j++) {
        if (index == 6) {
          for (var y = 0; y < this.odlNew.length; y++) {
            if (`${this.odlNew[y].str}` == `${this.result[j].cp_number.split(',')[index]}`) {
              this.odlNew[y].num += 1
            }
          }
        } else {
          for (var i = 0; i < this.odl.length; i++) {
            if (`${this.odl[i].str}` == `${this.result[j].cp_number.split(',')[index]}`) {
              this.odl[i].num += 1
            }
          }
        }
      }
      
      if (index == 6) {
        this.numArr = this.odlNew
      } else {
        this.numArr = this.odl
      }
      this.getMin()
    },
    getMin() {
      this.numArr = this.numArr.sort(function(a, b) {
        return a.num - b.num
      })
      var min = this.numArr[0]?.num
      var str = ''
      for (let i = 0; i < this.numArr.length; i++) {
        console.log(this.numArr[i].num <= min)
        if (this.numArr[i].num <= min) {
          min = `${this.numArr[i].num}`
          str = `${this.numArr[i].str}`
          console.log("str:", str, ',min:',min)
        }
      }
      this.min = `${str}: ${min}`

      const numStr = [...this.numArr]
      numStr.shift()
      numStr.pop()
      let total = 0
      for (const item of numStr) {
        total+=item.str
      }
      console.log(JSON.stringify(numStr), 1111)
      console.log(total/(numStr.length), '得到的')
    }
  }
}
</script>
<style lang="scss" scoped>
.center{
  max-width: 1200px;
  width: 100%;
  margin: 20px auto 0;
}
.col {
  display: flex;
  flex-direction: column;
  text-align: center;
  align-items: center;
  span {
    display: flex;
    // width: 30px;
    // height: 30px;
    border-radius: 15px;
    // background: #f00;
    // margin: 10px 0;
    // line-height: 30px;
    margin-top: 10px;
    color: #f00;
    justify-content: center;
    align-items: center;
  }
}
.el-row {
  justify-content: center;
  .el-col {
    padding: 0 5px;
    &:nth-child(7) {
      span {
        // background: #00f;
        color: #00f;
      }
    }
  }
}
.border-lr{
  padding: 0 5px;
  border-left: 1px solid red;
  border-right: 1px solid red;
  margin-right: 5px;
}
/deep/.radio0{
  border-radius: 0;
  .el-input__inner{
    border-radius: 0;
    height: 35px;
    line-height: 30px;
    text-align: center;
    padding: 0;
  }
  &.inp{
    .el-input__inner{
      border-top: 0;
      border-right: 0;
      border-left: 0;
      border-bottom: 1px solid rgb(0, 157, 255);
      padding: 0;
      background: transparent;
      width: 100%;
    }
  }
  &.inp{
    border-top: 0;
    border-right: 0;
    border-left: 0;
    border-bottom: 1px solid rgb(0, 157, 255);
    padding: 0;
    background: transparent;
    width: 100%;
    text-align: center;
    height: 35px;
    outline: none;
    font-size: 15px;
  }
}
.ul{
  padding: 0;
  margin: 0;
  .li{
    list-style-type: none;
    display: inline-block;
    margin-right: 12px;
    padding: 10px 0;
    color: #666;
    letter-spacing: .5px;
    font-size: 14px;
    i{
      margin-left: 7px;
      color: #F56C6C;
      cursor: pointer;
      -webkit-tap-highlight-color:transparent
    }
    span{
      cursor: pointer;
      -webkit-tap-highlight-color:transparent
    }
  }
}
/deep/.game_select{
  .el-input-group__prepend{
    width: 125px;
    padding: 0;
    .el-select{
      margin: -1px;
    }
  }
}
</style>